<template>
	<view>
		<z-paging ref='paging' v-model="dataList" @query="queryList">
			<view slot='top'>
				<view class="topic-info">
					<view class="back" @click="back">
						<u-icon name='arrow-left' size='40' color='rgba(255,255,255,.8)'></u-icon>
					</view>
					<view class="topic-name">#碎碎念</view>
					<view class="topic-data">
						<view><text>2.62W</text>参与</view>
						<view><text>11.11W</text>围观</view>
						<view><text>61.29W</text>动态</view>
					</view>
				</view>
				<view class="tabs-wrap">
					<u-tabs :list="tabsList" :current="tabsCurrentIndex" active-color="#ff4273" @change="tabsChange">
					</u-tabs>
				</view>
			</view>
			<showMoment :dataList="dataList"></showMoment>
		</z-paging>

	</view>
</template>

<script>
	import showMoment from '@/components/showMoment.vue'
	export default {
		components: {
			showMoment
		},
		data() {
			return {
				tabsCurrentIndex: 0,
				tabsList: [{
					name: '最新'
				}, {
					name: '最早'
				}, {
					name: '最热'
				}],
				dataList: [],
				request: {
					queryList: function() {
						return Promise.resolve([{
							imgList: ['https://www.auok.ltd/background.jpg',
								'https://www.auok.ltd/background.jpg'
							]
						}, {
							imgList: ['https://www.auok.ltd/avatar.jpg', 'https://www.auok.ltd/avatar.jpg',
								'https://www.auok.ltd/avatar.jpg'
							]
						}, {}])
					}
				},
			};
		},
		methods: {
			back() {
				uni.navigateBack({

				})
			},
			queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize, this.request, this.dataList)
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//这里的请求只是演示，请替换成自己的项目的网络请求，并在网络请求回调中通过this.$refs.paging.complete(请求回来的数组)将请求结果传给z-paging

				this.request.queryList({
					pageNo,
					pageSize
				}).then(res => {
					console.log(res)
					//拼接多条数据
					let arr = []
					for (let a = 0; a < 2; a++) {
						arr = arr.concat(res)
					}
					//请勿在网络请求回调中给dataList赋值！！只需要调用complete就可以了
					this.$refs.paging.complete(arr);
				}).catch(res => {
					//如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					//注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					//在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			},
			tabsChange(index) {
				this.tabsCurrentIndex = index
				this.$refs.paging.reload(true)
			}
		}
	}
</script>

<style lang="scss">
	.topic-info {
		height: 350rpx;
		background: url('https://www.auok.ltd/background.jpg');
		background-size: 100% 100%;
		padding: 30rpx;
		color: #fff;

		.topic-name {
			font-size: 40rpx;
			font-weight: 700;
			margin: 100rpx 0 30rpx 0;
		}

		.topic-data {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: rgba($color: #fff, $alpha: .7);

			text {
				font-size: 40rpx;
				margin-right: 15rpx;
				color: rgba($color: #fff, $alpha: 1);
			}
		}
	}
</style>
